<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    window.__unocss = {
      shortcuts: {
        'btn': 'py-2 px-4 font-semibold rounded-lg shadow-md cursor-pointer',
        'btn-green': 'text-white bg-green-500 hover:bg-green-700',
        'red': 'text-red-100',
        'body_init': 'flex items-center justify-center h-[100vh] box-border m-0',
        'center':'items-center justify-center flex',
        'step':'w-[30px] h-[30px] rounded-[50%] border-[3px] border-solid border-[#3498db] center bg-light-50'
      }
    }
  </script>
  <script src="https://cdn.jsdelivr.net/npm/@unocss/runtime"></script>
</head>
<body class="body_init ">
  <main class="w-[400px]">
    <div class="relative flex items-center justify-between mb-5 before:z-[-1] before:w-[98%] before:h-1 before:bg-[#ccc] before:top-[50%] before:content-[''] before:absolute before:left-0">
      <div id="progress" style="width: 0;" class="absolute w-[98%] h-1 top-[50%] bg-[#3498db] z-[-1]"></div>
      <div id="step" class="step">1</div>
      <div id="step" class="step">2</div>
      <div id="step" class="step">3</div>
      <div id="step" class="step">4</div>
    </div>
    <div class="center gap-4">
      <button id="prev" class="btn btn-green" disabled>Prev</button>
      <button id="next" class="btn btn-green">Next</button>
    </div>
  </main>

  <script>
    const progressId = document.querySelector('#progress')
    const nextId = document.querySelector('#next')
    const stepId = document.querySelectorAll('#step')
    nextId.addEventListener('click',(e) => {
      console.log(progressId.style.width,stepId,100/(stepId.length-1))
      100/(stepId.length-1)  
    })
    

  </script>
</body>
</html>